<template>
    <yh-dialog
        :visible.sync="visibleTemp"
        v-bind="$attrs"
        title="导出"
        :modal="false"
        :close-on-click-modal="false"
        drag
        width="500px"
        @close="handleCloseDialog"
    >
        <div class="dialog-main">
            <el-form label-position="right" label-width="100px" :model="submitForm">
                <el-form-item label="日期区间:">
                    <el-date-picker
                        v-model="submitForm.dates"
                        type="daterange"
                        :disabled="disab"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyyMMdd"
                        format="yyyy-MM-dd"
                        size="mini"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="导出文件:">
                    <el-select v-model="submitForm.exportType" style="width: 100%" @change="handleChange" clearable size="mini">
                        <el-option value="0" label="超限事件分布"></el-option>
                        <el-option value="1" label="超限情况"></el-option>
                        <el-option value="2" label="天添利-期限监控"></el-option>
                        <el-option value="3" label="天添利-杠杆率监控"></el-option>
                        <el-option value="4" label="公募-现金比例监控"></el-option>
                        <el-option value="5" label="公募-杠杆率监控"></el-option>
                        <el-option value="6" label="系统-条款支持率监控"></el-option>
                        <el-option value="7" label="公私募-条款支持率监控"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: right; padding-right: 20px">
            <el-button size="mini" @click="handleCloseDialog"> 取 消 </el-button>
            <el-button size="mini" type="primary" @click="handleSave">确 认 </el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { downLoadFile } from '@/utils/request';
import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';

@Component({ name: 'SystemParamSetting', components: {} })
export default class SystemParamSetting extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop() overrunDetail: any;
    @Prop() type: string; // add | look

    public visibleTemp: boolean = false;

    disab: boolean = false;

    submitForm: any = {
        dates: [],
        exportType: '',
    };

    created() {}

    mounted() {}

    @Watch('visible', { immediate: true, deep: true })
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    handleChange(val): void {
        if (val === '0') {
            this.submitForm.dates = [];
            this.disab = true;
        } else {
            this.disab = false;
        }
    }

    /**
     * 保存事件
     */
    handleSave(): void {
        if (!this.verify()) return;

        let data = this.submitForm;
        data.startDate = this.submitForm.dates[0];
        data.endDate = this.submitForm.dates[1];

        downLoadFile({
            url: '/cmschina/cockpit/export',
            method: 'post',
            data,
        });
        this.handleCloseDialog();
    }

    verify() {
        if (!this.submitForm.exportType) {
            this.yh_message_warn('导出文件不能为空!');
            return false;
        }
        if (!this.submitForm.dates.length && this.submitForm.exportType !== '0') {
            this.yh_message_warn('日期区间不能为空!');
            return false;
        }
        return true;
    }

    /**
     * 关闭dialog事件
     */
    handleCloseDialog(): void {
        this.syncVisible = false;
    }
}
</script>
<style lang="scss" scoped>
</style>
